<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="800px"
    @close="handleClose"
  >
    <el-table
      :data="communityList"
      v-loading="loading"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="communityName"
        label="小区名称"
        align="center"
      />
      <el-table-column
        v-if="showTime"
        prop="activityStartTime"
        label="开展时间"
        align="center"
        width="120"
      />
    </el-table>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listByStatus, getUnstartedCommunities } from '@/api/system/target'

export default {
  name: 'CommunityListDialog',
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      communityList: [],
      loading: false,
      showTime: false,
      currentType: ''
    }
  },
  methods: {
    show(type, title) {
      this.dialogVisible = true
      this.currentType = type
      this.dialogTitle = title
      
      // 根据类型决定是否显示时间列
      this.showTime = type === 'completed' || type === 'planned'
      
      this.loadCommunityList()
    },
    
    loadCommunityList() {
      this.loading = true
      
      if (this.currentType === 'unstarted') {
        // 未开展小区
        getUnstartedCommunities().then(response => {
          this.communityList = response.data || []
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      } else {
        // 已完成或计划开展小区
        const status = this.currentType === 'completed' ? '1' : '0'
        listByStatus(status).then(response => {
          this.communityList = response.data || []
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    
    handleClose() {
      this.dialogVisible = false
      this.communityList = []
      this.currentType = ''
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: center;
}
</style>